<template>
  <Card dis-hover :bordered='false'>
    <Tabs :value="inFirstName" type="card" :animated="false" @on-click="changeTab" name="father">
      <template v-for="(item,index) in tabList">
        <TabPane :key="item.name" :icon="item.type === '1'?'md-link':''" :label="`${item.title}  (${item.total})`"
          :name="item.id.toString() " tab="father">
          <table-form v-if="inFirstName === item.id.toString()" :id="item.id" :tabList="propList"
            @changeTabNum="changeTabNum" @editChangeTotal="editChangeTotal" />
        </TabPane>
      </template>
      <Button v-hasC="{name: 'v1-data-setting-view-create-view5',flag: 'v1/data/setting-view/create-view',}"
        @click="handleTabsAdd" size="small" type="primary" slot="extra">新增</Button>
    </Tabs>
    <Modal v-model="showCreate" :mask-closable="false" :closable="false">
      <Form ref="create" :model="modalParams" :rules="ruleValidate">
        <FormItem prop="title">
          <Input v-model="modalParams.title" maxlength="10"
            @on-keyup="modalParams.title=modalParams.title.replace(/\s+|[\r\n]/g,'')" placeholder='请输入视图标题名称'></Input>
        </FormItem>
        <div class="sky-tit">推送到</div>
				<FormItem :rules="{required: true, message: `请选择部门${index+1}`, trigger: 'change'}"
					v-for="(items,index) in modalParams.push_lists" :prop="'push_lists.' + index + '.department_id'"
					:label="`部门${index+1}`" :key="index">				
					<Select v-width="118" placeholder="请选择部门" v-model="items.department_id" clearable
						@on-change="statusselect(index, items.department_id)">
						<Option :disabled="disabledstatus.indexOf(item.value)>-1" v-for="item in departmentlists"
							:key="item.value" :value="item.value">{{item.label}}</Option>
					</Select>
					<Select style="width:auto;" :max-tag-count='3' v-model="items.member_ids" class="ivu-ml-8 ivu-inline-block" placeholder="请选择人员" multiple>
						<Option v-for="item in items.personList" :key="item.value" :value="item.value">{{item.label}}
						</Option>
					</Select>
					<Button v-if="modalParams.push_lists.length !== 1" class="ivu-ml-8" type="default"
						@click="handleRemove(index)">删除</Button>
				</FormItem>
        <FormItem>
					<Button type="dashed" icon="md-add" @click="handleAddItem">添加</Button>
				</FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleCreate">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
  import tableForm from './table-form'
  import tableList from './table-list'
  import patientList from './patient-list'
  import patientForm from './patient-form'
  import { getViewList, changeOneViewTotal,getDepartmentRole } from "../../../api/TApi/index.js"
  import { settingviewcreateview,settingviewgetparamslist } from "@/api/hqapi/indexone";
  export default {
    name: 'improvePlan',
    components: { tableForm, tableList, patientList },
    data() {
      return {
        inFirstName: "0",
        tabList: [],
        showCreate: false,
        selectNum: [],
        propList: [],
        ruleValidate: {
          title: [
            { required: true, message: '请输入视图标题名称', trigger: 'blur, change' },
          ],
        },
        departmentlists:[],
        modalParams: {
          id: '',
          type: 0,
          title: '',
          push_lists: [
              {
                  department_id: "",
                  member_ids: [],
                  personList: [],
              }
          ]
        },
        disabledstatus: []		
      }
    },
    methods: {
      handleCancel() {
        this.showCreate = false
        this.$refs.create.resetFields();
      },
      handleCreate() {
        this.$refs.create.validate((valid) => {
          if (valid) {
            let list = []
						for (let item of this.modalParams.push_lists) {
							list.push({ department_id: item.department_id, member_id: item.member_ids })
            }
            let params={
              id:this.modalParams.id,
              type:this.modalParams.type,
              title:this.modalParams.title,
              push_list:JSON.stringify(list)
            }
            settingviewcreateview(params).then(res => {
              this.$Message.success('新增常规视图成功')
              this.showCreate = false              
              this.$refs.create.resetFields();
              this._getViewList()
            })
          }
        })
      },
      // 新增常规试图
      handleTabsAdd() {        
        this.modalParams={
          id:'',
          type:0,
          title:'',
          push_lists:[{
            department_id: "",
            member_ids: [],
            personList: [],
          }]
        }
        this.showCreate = true     
        this.$refs.create.resetFields();
      },
      handleAddItem() {
        this.modalParams.push_lists.push(
            {
                department_id: "",
                member_ids: [],
                personList: [],
            }
        )
			},
      _getViewList() {
        getViewList().then(res => {
          this.tabList = res.list
          // 筛选出常规视图给子组件用于切换视图
          this.propList = res.list.map(ee => {
            return {
              value: ee.id,
              ...ee
            }
          })
        })
      },
      changeTab(name) {
        this.inFirstName = name.toString()
      },
      changeTabNum(data) {
        this._getViewList()
      },
      editChangeTotal(id) {
        changeOneViewTotal({ id }).then(res => {
          let index = this.tabList.findIndex(ee => ee.id === id)
          let changeView = this.tabList[index]
          changeView.total = res.total
          this.$set(this.tabList, index, changeView)
        })
      },
      departmentfun(index, department_id) {
				if(department_id){
					getDepartmentRole({ department_id }).then(res => {
						this.modalParams.push_lists[index].personList = res
					})
				}else{
					this.modalParams.push_lists[index].personList = []
					this.modalParams.push_lists[index].member_ids = []
				}
                
      },
			statusselect(index, e) {
          this.modalParams.push_lists[index].personList = []
					this.modalParams.push_lists[index].member_ids = []
          this.disabledstatus[index] = e
          this.departmentfun(index, e)
      },
			handleRemove(index) {
            this.modalParams.push_lists.splice(index, 1)
            this.disabledstatus.splice(index, 1)
        }
    },

    created() {
      settingviewgetparamslist().then(res => {
        this.departmentlists = res.department
      })
      this._getViewList()
    }
  }
</script>
<style lang='less' scoped>
  /deep/ .ivu-btn-small {
    height: 29px;
    padding: 0 14px
  }
</style>